<script setup>
import { getGoodsDetail } from '@/api/goods.js'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import { useCartStore } from '@/stores/cartList'
defineOptions({
  name: 'ProductionDetail'
})
const cartStore = useCartStore()
const route = useRoute()
const detailData = ref('')
const activeUrl = ref('')
const tog = (url) => (activeUrl.value = url)
const loading = ref(true)
const flushData = async () => {
  loading.value = true
  sku.value = []
  count.value = 1
  const res = await getGoodsDetail(route.params.id)
  res.result.categories = res.result.categories.reverse()
  detailData.value = res.result
  activeUrl.value = detailData.value.mainPictures[0]
  loading.value = false
}
onMounted(async () => {
  flushData()
})
const count = ref(1)
const sku = ref([])
const addCarts = async () => {
  const skuId = detailData.value.skus
    .filter((item) =>
      item.specs.every((value, index) => value.valueName === sku.value[index])
    )
    .map((item) => item.id)[0]
  if (skuId) {
    cartStore.addCartItem({ skuId, count: count.value })
    ElMessage.success('添加成功')
  } else ElMessage.warning('请选择规格')
}
watch(
  () => route.params.id,
  () => {
    flushData()
  }
)
</script>

<template>
  <div class="p-5 container" v-if="detailData" v-loading="loading">
    <el-breadcrumb :separator-icon="ArrowRight" class="mb-4">
      <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
      <template v-for="value in detailData.categories" :key="value.id">
        <el-breadcrumb-item
          :to="
            value.parent
              ? `/allCategory/${value.id}?cate=${value.parent.name}&sub=${value.name}`
              : `/category/${value.id}`
          "
          >{{ value.name }}</el-breadcrumb-item
        >
      </template>
      <el-breadcrumb-item>{{ detailData.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="bg-white p-4 row">
      <div class="col-lg-7 col-12 row">
        <img
          v-if="detailData.mainPictures"
          :src="activeUrl"
          alt=""
          class="col-9"
        />
        <ul
          class="col-3 m-0 list-unstyled d-flex flex-column justify-content-between"
        >
          <li v-for="(item, index) in detailData.mainPictures" :key="index">
            <img
              :src="item"
              width="65"
              alt=""
              :style="{
                border:
                  item === activeUrl
                    ? '2px solid green'
                    : '2px solid transparent'
              }"
              class="d-block mx-auto"
              @mouseenter="tog(item)"
            />
          </li>
        </ul>
      </div>
      <div class="col-lg-5 col-12">
        <h4>
          {{ detailData.name }}
        </h4>
        <p class="my-2 text-secondary">
          {{ detailData.desc }}
        </p>
        <p class="text-danger">
          <span style="font-size: 25px">￥{{ detailData.price }}</span>
          <s class="text-secondary">￥{{ detailData.oldPrice }}</s>
        </p>
        <div class="bg-light text-secondary p-3">
          <p>促销 &ensp;&ensp;12月好物放送，App领券购买直降120元</p>
          <div class="d-flex justify-content-start">
            <p>服务</p>
            <ul class="d-flex jsutify-content-around">
              <li
                style="color: #27ba9b"
                v-for="(value, index) in ['无忧退货', '免费包邮', '快速退款']"
                :key="index"
                class="mx-3"
              >
                <span class="text-secondary">{{ value }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <div
            v-for="(spe, index) in detailData.specs"
            :key="spe.id"
            class="my-2"
          >
            <div>
              <div class="text-secondary">{{ spe.name }}</div>
              <el-radio-group v-model="sku[index]">
                <el-radio
                  border
                  size="default"
                  v-for="(value, index) in spe.values"
                  :key="index"
                  :label="value.name"
                >
                  {{ value.name }}
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-input class="w-50" type="number" min="0" v-model="count">
            <template #prepend>
              <el-button
                text
                type="success"
                @click="count === 1 ? (count = 1) : count--"
                >-</el-button
              >
            </template>
            <template #append>
              <el-button text type="success" @click="count++">+</el-button>
            </template>
          </el-input>
          <div class="my-2">
            <el-button plain type="success" @click="addCarts"
              >加入购物车</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="row my-3 bg-white">
      <div class="col-lg-10 p-3">
        <h4 class="">商品详情</h4>
        <div
          v-for="(item, index) in detailData.details.properties"
          :key="index"
        >
          <span class="text-secondary"
            >{{ item.name }} &ensp;&ensp; {{ item.value }}</span
          >
        </div>
        <div v-for="(item, index) in detailData.details.pictures" :key="index">
          <img :src="item" draggable="false" class="img-fluid" alt="" />
        </div>
      </div>
      <div class="col-lg-2 d-lg-block d-none">
        <div class="p-3 text-white" style="background-color: #e26237">
          <h4>24小时热榜</h4>
        </div>
        <goods
          v-for="item in detailData.hotByDay"
          :item="item"
          :key="item.id"
        ></goods>
        <div class="p-3 text-white" style="background-color: #e26237">
          <h4>相似商品</h4>
        </div>
        <goods
          v-for="item in detailData.similarProducts"
          :item="item"
          :key="item.id"
        ></goods>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
